<script setup lang="ts">

import {computed} from "vue";

const props = defineProps({
  element: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const styleStr = computed(()=>{
  let styleStr = ''
  styleStr += `z-index: ${props.element.layer};`
  styleStr += props.element.style
  return styleStr;
})
</script>

<template>
  <img :alt="element.name" :src="element.content" class="element-image" :style="styleStr"/>
</template>

<style scoped lang="scss">
.layout-design-element {
  width: 100%;
  height: 100%;
}

.element-image {
  width: 100%;
  height: 100%;
  cursor: move;
}
</style>
